<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { saveFormApi } from '@/api/system'
const props = defineProps<{
  isShow: boolean
  title: string
  formInfo: any
}>()

const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getYingYongTree'): void
}>()

const ruleFormRef = ref<any>()
const form = ref<any>({
  sqlId: 'appClassMgr.insertAppClass', // appClassMgr.updateAppClass
  id: undefined,
  parent_id: undefined,
  text: '',
  class_order: '',
  class_comment: ''
})
interface RuleForm {
  text: string
  class_order: string
  class_comment: string
}
const rules = reactive<FormRules<RuleForm>>({
  text: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  class_order: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})
if (props.title === '修改应用分类') {
  form.value.id = props.formInfo.id
  form.value.parent_id = props.formInfo.parent_id
  form.value.text = props.formInfo.label
  form.value.class_order = props.formInfo.attributes.class_order
  form.value.class_comment = props.formInfo.attributes.class_comment
}

// 添加或修改
const saveFormFn = async () => {
  const msg = props.title === '修改应用分类' ? '修改' : '添加'
  const params = {
    ...form.value
  }
  if (props.title === '添加一级应用分类') {
    params.sqlId = 'appClassMgr.insertAppClass'
    params.parent_id = 0
  }
  if (props.title === '添加应用分类') {
    params.sqlId = 'appClassMgr.insertAppClass'
    params.parent_id = props.formInfo.id
  }
  if (props.title === '修改应用分类') params.sqlId = 'appClassMgr.updateAppClass'
  console.log(params)
  await saveFormApi(params)
    .then((res: any) => {
      if (res === 'success') {
        ElMessage({ message: msg + '成功', type: 'success' })
        emit('getYingYongTree')
        emit('update:isShow', false)
      } else {
        ElMessage({ message: msg + '失败', type: 'error' })
      }
    })
    .catch(() => {
      ElMessage({ message: '操作失败', type: 'error' })
    })
}

// 取消
const Cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('update:isShow', false)
}

// 确定
const Confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      // console.log('submit!', form.value)
      saveFormFn()
    } else {
      ElMessage({ message: '请输入完整信息', type: 'error' })
    }
  })
}
</script>
<template>
  <div>
    <el-dialog :model-value="true" :title="title" width="500px" @close="Cancel(ruleFormRef)">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="auto">
        <el-form-item label="名称:" prop="text">
          <el-input v-model="form.text" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="排序:" prop="class_order">
          <el-input v-model="form.class_order" type="number" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="form.class_comment" :rows="4" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Cancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="Confirm(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped></style>
